<template>
	<view>
		<view class="head">
			<view class="title">
				最新资讯
			</view>
			<view class="zxswiper">
				<u-swiper
				            :list="list2"
				            indicator
							keyName="image"
							showTitle
				            indicatorMode="line"
				            circular
							height="160"
				></u-swiper>
			</view>
			
			
		</view>
		<view class="middle">
			<view class="buttonsp">
				<button @click="tryCommodity">商品列表</button>
			</view>
			<view class="firstClassifction">
				<view class="classifyLine">
					<view class="lineContent" v-for="(item,index) in Classification1" v-if="index>=0&&index<5" @click="toDetail(index)">
						<image :src="item.coverImg" :mode="aspectFit" class="lineImage"></image>
						<p class="classifyfonts">{{item.typeName}}</p>
					</view>
				</view>
				<view class="classifyLine">
					<view class="lineContent" v-for="(item,index) in Classification1" v-if="index>=5"  @click="toDetail(index)">
						<image :src="item.coverImg" :mode="aspectFit" class="lineImage"></image>
						<p class="classifyfonts">{{item.typeName}}</p>
					</view>
				</view>
			</view>
		</view>
		
		<view class="productionarea">
			<production></production>
			
		</view>

	</view>
</template>

<script>
	
	
	export default {
		data() {
			return {
				  list2: [
					{
					 image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.jnslxh.com%2Fstatic%2Fupload%2Fimage%2F20220622%2F1655858713341513.jpg&refer=http%3A%2F%2Fwww.jnslxh.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659176335&t=14981b33e60c4a4169729053665d4014',
					 title: '2022年度全国农民手机应用技能培训周活动在京启动',
					},
					{
					 image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13830252593%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659176412&t=e80ceb2b99ce2b034a3edbcb1ef126e8',
					 title: '农业农村部召开党组会议学习贯彻习近平总书记给种粮大户回信重要精神'
					},
					{
					 image: 'http://www.moa.gov.cn/xw/zwdt/202206/W020220616830605596046.jpg',
					 title: '《2022国家强农富农惠农政策专刊》出版'
					}
				  ],
				  Classification1:[
					
					
				  ],
				  
			}
		},
		mounted() {
			this.$axios({
				method:'POST',
				url:'/type/getTypeList',
				params:'',
			}).then(
				res =>	{
					this.Classification1=res.data;
					uni.setStorageSync('firstTypeList',this.Classification1);
					//getApp().globalData.firstTypeList = res.data;
					
					console.log(res.data,"！！！")
				}
			).catch(
				err	=>	{
					
					console.log(err,"？？？")
				}
			)
		},
		methods: {
			goposter(){
				uni.navigateTo({
					url:""
				})
			},
			toDetail(index){
			
				// for(var i=0;i<this.Classification1.length;i++)
				// 	console.log(this.Classification1[i].id);
				
				uni.navigateTo({
					url:"../Market/secondTypeList?firstIndex="+index
					
				})
				
			},
			tryCommodity(){
				uni.navigateTo({
					url:"/pages/production/production"
				})
			}
		}
	}
</script>

<style lang="scss">
.productionarea{
	margin-top: 20upx;
	width: 98%;
	margin-left: 1%;
	border-radius: 10upx;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	border:1upx solid lightgray;
}
.head{
	height: 400upx;
	background-color: #eeeeef;
	overflow: hidden;
	width: 98%;
	margin-left: 1%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	border:1upx solid lightgray;
	border-radius: 10upx;
	.zxswiper{
		width: 96%;
		margin-left: 2%;
	}
	.title{
		// height: 100upx;
		margin-top: 20upx;
		margin-bottom: 20upx;
		margin-left: 20upx;
	}
}
.middle{
	margin-top: 20upx;
	.buttonsp{
		border-radius: 10upx;
		margin-top: 20upx;
		margin-bottom: 20upx;
		width: 96%;
		margin-left: 2%;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}
	.firstClassifction{
		border:1upx solid lightgray;
		border-radius: 10upx;
		height:330upx;
		margin:8upx;
		background-color: #efefef;
		padding-bottom: 20upx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		.classifyLine{
			height:45%;
			margin:15upx;
			//border:2upx solid red;
			display:flex;
			align-items: center;
			
			.lineContent{
				width:18%;
				height:100%;
				margin: 15upx;
				.lineImage{
					border-radius: 18%;
					height:75%;
					width:100%;
					border:1upx solid lightgray;
				}
				.classifyfonts{
					font-size: 22upx;
					text-align:center;
				}
			}
		}
	}
}

</style>
